<template>
  <div class="singer">
    <list-view :list="singerList" @select="selectItem"></list-view>
    <router-view></router-view>
  </div>
</template>

<script>
  import {getSingerList} from "api/singer";
  import {ERR_OK} from 'api/config'
  import Singer from 'common/js/singer'
  import ListView from 'base/listview/listview'
  import {mapMutations} from 'vuex'
  const HOT_NAME = '热门'
  const HOT_LENGTH = 10
  export default {
    name: "singer",
    data() {
      return {
        singerList: []
      }
    },
    components:{
      ListView
    },
    created() {
      this._getSingerList()
    },
    methods: {
      selectItem(item){
        this.$router.push({
          path:`/singer/${item.id}`
        })
        this.setSinger(item)
      },
      _getSingerList() {
        getSingerList().then((res) => {
          if (res.code === ERR_OK) {
            console.log(res.data.list)
            this.singerList = this._getNormalData(res.data.list)

          }
        })
      },
      _getNormalData(list) {
        let map = {
          hot:{
            title: HOT_NAME,
            items: []
          }
        }
        list.forEach((item,index)=>{
          if(index < HOT_LENGTH){
            map.hot.items.push(new Singer({
              id:item.Fsinger_mid,
              name:item.Fsinger_name
            }))
          }
          let key = item.Findex
          if(!map[key]){
            map[key]={
              title: key,
              items: []
            }
          }
          map[key].items.push(new Singer({
            id:item.Fsinger_mid,
            name:item.Fsinger_name
          }))
        });

        let hot=[]
        let normal = []
        for(let key in map){
          let value = map[key]
          if(HOT_NAME === value.title){
            hot.push(value)
          }else if(value.title.match(/[a-zA-Z]/)){
            normal.push(value)
          }
        }
        normal.sort((a,b)=>{
          return a.title.charCodeAt(0) - b.title.charCodeAt(0)
        })

        return hot.concat(normal);
      },
      ...mapMutations({
        setSinger:'SET_SINGER'}
      )
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .singer
    position fixed
    top 88px
    width 100%
    bottom 0
</style>
